import {Detail} from "../classes/MyUI.js";
import MyComponent from "../classes/MyComponent.js";
import {generateElement} from "../functions/common.js";

const detail = new Detail(
    "数据单元Block",
    ["By Louis，2021-01-15", "数据变化的动画演示"],
    {margin: "30px 40px"}
);
document.getElementById("detail").appendChild(detail.getElement());

export class DataCell extends MyComponent {
    constructor(address, config) {
        super();
        this.elem = generateElement({
            ...config,
            type: "span",
            display: "inline-block"
        });
        this.data = null;
        this.address = address ? address : "DataCell";
        this.setInnerText(this.address);
    }

    changeValue(innerText, callBack) {
        this.innerText = innerText;
        this.setInnerText(innerText);
        try {
            anime({
                targets: this.elem,
                rotateX: "+=360deg",
                complete: (anim)=>{
                    if (callBack){callBack();}
                }
            });
        } catch (e) {
            console.error("Error:DataCell.changeInnerText:", e);
        }
    }

    setInnerText(newInnerText){
        this.elem.innerText = newInnerText;
    }

}



let dataCell = new DataCell("0000H", {
    width: "100px",
    height: "30px",
    lineHeight: "30px",
    backgroundColor: "#5FB878",
    color: "white",
    padding: "0 5px"
});
document.getElementById("dataCell").appendChild(dataCell.getElement());
dataCell.init();



let showData = 0;
document.getElementById("testBtn").onclick = () => {
    showData++;
    dataCell.changeValue(showData.toString());
};